/*
 * @Description:
 * @Author: yech
 * @Date: 2021-02-16 16:07:28
 */
import { designComponent } from '../../../src/use/designComponent';
import {AppNavigator} from './app-navigator';

import {
    DefineComponent,
    defineComponent,
    markRaw,
    reactive,
    watch
} from 'vue';

export const AppNavigatorPage = designComponent({
    setup() {

        const navigator = AppNavigator.use.inject();

        const state = reactive({
            PageComponent: null as null | DefineComponent
        });

        const utils = {
            reset: async () => {
                const route = navigator.state.route;
                if (!route) {
                    return;
                }
                let { path } = route;
                if (!path) {
                    return;
                }
                if (path.charAt(0) === '/') {
                    path = path.slice(1);
                }
                const Component = (await import('story/pages/' + path)).default;
                state.PageComponent = markRaw(Component);
            }
        };

        watch(() => navigator.state.route.path, utils.reset, { immediate: true });

        return {
            render:() => {
                const { PageComponent } = state;
                return !!PageComponent ? <PageComponent /> : null;
            }
        }
    }
});
